<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /* flex-direction:设置主轴方向 */
      /* justify-content: 设置主轴上的子元素排列方式; */
      /* flex-wrap: 设置了元素是否换行; */
      /* align-content: 设置侧轴上的子元素的排列方式(多行); */
      /* align-items: 设置侧轴上的子元素排列方式(单行); */
      /* flex-flow: 复合属性, 相当于同时设置了flex-direction和flex-wra; */

      // 1.给父元素设置主轴方向  (默认主轴(row)为x方向,水平向右     默认侧轴(content)方向就是Y轴方向,水平向下)
      // flex-direction:;
      //               row(默认值从左到右)
      //               row-reverse(从右到左)
      //               column(从上到下)
      //               column-reverse(从下到上)

      // 2.设置主轴上的子元素排列方式
      // justify-content:;
      //                 flex-start      默认从头部开始 如果主轴是X轴,则从左到右
      //                 flex-end        从尾部开始排列
      //                 center          在主轴居中对齐(如果主轴是X轴则水平居中)
      //                 space-around    平分剩余空间
      //                 space-between   先两边贴边,再平分剩余空间(重要)

      // 3.设置了元素是否换行
      // 默认情况下flex布局是不换行的,盒子放不下的时候会缩小子元素的宽度
      // 如果要另起一行的话得修改成wrap
      // flex-wrap:;
      //                 wrap

      // 4.设置侧轴上的子元素排列方式(单行)
      // align-items:;
      //                 flex-start  默认值 从上到下
      //                 flex-end 从下到上
      //                 center  子盒子挤在一起居中
      //                 stretch  拉伸  (没有高度就默认是拉伸)

      // 5.设置侧轴上的子元素的排列方 式(多行)  只对多行有效果,在单行下是没有效果的
      // align-content:;
      //                 flex-start   默认值在侧轴的头部开始排列
      //                 flex-end     在侧轴的尾部开始排列
      //                 center       在侧轴中间显示
      //                 space-around 子项在侧轴先分布在两头,在平分剩余空间
      //                 stretch      设置子项元素高度平分父元素高度

      // 6. flex-flow: 复合属性, 相当于同时设置了flex-direction和flex-wra
      // flex-flow: column wrap

      // 7.flex属性
      //                 flex: 1     flex属性定义子项目分配剩余空间,用flex来表示占多少份数

      // 8.控制子项自己在侧轴上的排列方式
      //                 align-self: flex-end   从下到上
      //                 order      属性定义项目排列的顺序
    </script>
  </body>
</html>
